<template>
  <div class="money-store" v-if="isrender">
    <div class="money-store-content">
      <img :src="bgImg" alt="">
      <div class="money-store-btn">
        <img :src="require('./btn.png')" alt="" @click="goMoneyStore">
      </div>
      <div class="money-store-close">
        <img :src="require('./x@2x.png')" alt="" @click="close">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      isrender: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        bgImg: require('./bg_money.png')
      }
    },
    methods: {
      close () {
        this.isrender = false
        this.$router.push('/mine')
      },
      goMoneyStore () {
        this.$router.push('/certificate') // 实名认证页面
      }
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .money-store {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: $zIndex-10--goAuthPromote;
    font-size: 0;
    text-align: center;
    &-content {
      position: absolute;
      top: 16%;
      img {
        width: 80.5333333333333333333%;
      }
    }
    &-btn {
      position: relative;
      top: -140px;
      img {
        width: 500px;
        height: 80px;
      }
    }
    &-close {
      margin-top: 70px;
      img {
        width: 82px;
        height: 82px;
      }
    }
  }
</style>
